<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      margin: 100px auto;
      width: 600px;
      height: 600px;
      position: relative;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="box"></div>
  <!-- <div style="width: 20px; height: 20px; border-radius: 20px; position: absolute; left: 20px; right: 20px; background: red;"></div> -->
  <script>
    /* 每个球都是一个对象 */
    /* 每个对象有 尺寸、背景色、位置（绝对定位，left top） */
    function Ball(size, left, top) {
      this.size = size || [10, 50];
      this.left = left || [0, 550];
      this.top = top || [0, 550];
    }
    // 根据球的尺寸生成具体的 html 结构
    Ball.prototype.createBall = function () {
      var _size = this.getRand(this.size[0], this.size[1]),
        _left = this.getRand(this.left[0], this.left[1]),
        _top = this.getRand(this.top[0], this.top[1]),
        _bgcolor = this.getBgColor();
      var _html = '<div style="width: ' + _size + 'px; height: ' + _size + 'px; border-radius: ' + _size + 'px; position: absolute; left: ' + _left + 'px; top: ' + _top + 'px; background: ' + _bgcolor + ';"></div>';
      return _html;
    }
    // 实现数值的随机 (min max为下标)
    Ball.prototype.getRand = function (min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }
    // 返回随机的颜色值
    Ball.prototype.getBgColor = function () {
      var bgcolors = ["#f83600", "#FFF94C", "#0072ff", "#780206", "#7B920A", "#dc2430", "#A83279", "#00bf8f", "#FF512F", "#485563", "#061700", "#02AAB0"];
      return bgcolors[this.getRand(0, bgcolors.length - 1)];
    }

    var ball_html = '';
    for (let i = 1; i <= 100; i++) {
      ball_html += new Ball().createBall();
    }
    document.getElementById('box').innerHTML = ball_html;
  </script>
</body>

</html>